<template>
  <div>
  <!-- ------父评论------- -->
  <div class="pareht">
    <!-- 根据组件名字调用自己，如果还有父级评论时间，就继续调用自己 -->
    <ContentParent v-if="parent.parent" :parent="parent.parent" @parenRrply="rply"></ContentParent>
    <div class="pareht-header" >
      <span>{{parent.user.nickname}}</span>
      <span class="date">{{parent.create_date | formatDate}}</span>
      <span class="reply" @click="rply(parent)">回复</span>
    </div>
    <div class="pareht-body">
      {{parent.content}}
    </div>
  </div>

  </div>
</template>

<script>
export default {
  name:'ContentParent',
  props:{
    parent:Object,
  },
  methods:{
    rply(parent) {
        console.log('这里是回复文章的',parent);
        this.$emit('parenRrply',parent)
    }
  }
}
</script>

<style lang="less" scoped>
  .pareht{
    border: 1px solid #f00;
    padding: 5px;
    .pareht-header{
      font-size: 12px;
      color: #999;
      display: flex;
      .date{
        margin-left: 10px;
        flex: 1;
      }
      .reply{
        font-size: 14px;
        position: relative;
        color: #666;
        z-index: 11;
      }
    }
    .pareht-body{
      font-size: 14px;
      margin: 5px 0;
    }
  }
</style>